var listMusic = document.querySelector('#listMusic');
ajax({
    url: '/personalized',
    method: 'GET',
    success: function(resp) {
        show1(resp.result);
    }
});

function show1(data) {
    // console.log(data);
    listMusic.innerHTML = '';
    var result = "";
    for (var i = 0; i < 9; i++) {
        result += `
    <li onclick="fn1(${data[i].id})" >
        <a href="#">
            <div class="prop">
                <div class="img-box">
                    <img src="${data[i].picUrl}" alt="">
                </div>
                <div>${data[i].name}</div>
            </div>
        </a>
    </li>
        `;
    }
    listMusic.innerHTML = result;
}

var newMusic = document.querySelector('#newMusic');
var musicList = document.querySelector('#musicList');
ajax({
    url: '/personalized/newsong',
    method: 'GET',
    success: function(resp) {
        show2(resp.result);
    }
});

function show2(data) {
    newMusic.innerHTML = '';
    var result = "";
    for (var i = 0; i < 9; i++) {
        result += `
    <li>
        <div class="prep">
            <div class="musicPro">
                <div class="musicName">${data[i].name}</div>
                <div class="musicAuthor">${data[i].song.artists[0].name}</div>
            </div>
            <a href="#" onclick=jump(${data[i].id})>
                <div class="musicPlay">
                    <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
                </div>
            </a>
        </div>
    </li>
        `;
    }
    newMusic.innerHTML = result;
}

function jump(id) {
    window.location.href = `play.html?id=${id}`;
}

ajax({
    url: '/personalized/newsong',
    method: 'GET',
    success: function(resp) {
        show2(resp.result);
    }
});

function fn1(id) {
    ajax({
        url: '/playlist/track/all',
        method: 'GET',
        data: {
            id: id,
            limit: 20
        },
        success: function(resp) {
            show3(resp.songs);
            show4();
        }
    })
};

function show3(data) {
    console.log(data);
    musicList.innerHTML = '';
    var result = "";
    for (var i = 0; i < data.length; i++) {
        result += `
    <li>
        <div class="prep">
            <div class="musicPro">
                <div class="musicName">${data[i].name}</div>
                <div class="musicAuthor">${data[i].al.name}</div>
            </div>
            <a href="#" onclick=jump(${data[i].id})>
                <div class="musicPlay">
                    <span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
                </div>
            </a>
        </div>
    </li>
        `;
    }
    musicList.innerHTML = result;
};

function show4() {
    let po = document.querySelector('.musicList');
    po.style.display = 'block';
    po.style.animationPlayStart = 'running';
}